<!DOCTYPE html>
<html>
<head>
    <title>个人页面</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/userProfiles.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>

    <script>
        $(function () {
            //获取url上的id
            var params = getParams();
            //判断是否有id
            if (params.id) {
                //发送请求 获取用户的信息
                $.get("/users/" + params.id, function (data) {
                    //判读是否本人 删除关注 和私信
                    if (params.id = data.id) {
                        $("#letterBtn").remove();
                        $("#followBtn").remove();
                    }
                    console.log(data);
                    //修改背景
                    $(".bg").css("background-image", "url('" + data.coverImgUrl + "')");
                    //视图渲染
                    $(".info").renderValues(data);
                });
            }

            //点击标签页切换评论数据
            $(".nav-link").click(function () {
                type = $(this).data("type");
                if (type == 2) {
                    url = "/users/" + params.id + "/travelComments";
                } else {
                    url = "/users/" + params.id + "/comments";
                }
                //每次点击后翻页数据初始化
                currentPage = 1;
                pages;
                loading = false;
                commentData = [];
                query(url);
            })

            //当前页
            var currentPage = 1;
            //总页数
            var pages;
            //是否查询的标记
            var loading = false;
            //用户存储评论的数组容器
            var commentData = [];
            //链接地址
            var url;
            //游记还是攻略的标记
            var type;

            //查询方法
            function query(url) {
                //如果正在查询就不继续查了,退出
                if (loading) {
                    return;
                }
                //设置为查询状态
                loading = true;
                //TA的攻略点评
                $.get(url, {currentPage: currentPage, pageSize: 5}, function (data) {
                    console.log(data);
                    $.merge(commentData, data.list);
                    console.log(type);
                    $("#comments" + type).renderValues({list: commentData}, {
                        getHref: getHref,
                        getStar: function (item, value) {
                            //拼接星星
                            var temp = "";
                            //填充的星星数 点评  实心
                            for (var i = 0; i < value; i++) {
                                temp += '<i class="fa fa-star"></i>';
                            }
                            //空心
                            for (var i = 0; i < 5 - value; i++) {
                                temp += '<i class="fa fa-star-o"></i>';
                            }
                            //选择 拼接
                            $(item).html(temp);
                        },
                    });
                    //当前页+1
                    currentPage++;
                    //总页数
                    pages = data.pages;
                    //设置为没有在查询  本次查询结束
                    loading = false;
                })
            }

            //滚动页面 触发事件 翻页
            $(window).scroll(function () {
                //判断是否滚动到底部了  窗口的高度+文档滚动的高度 大于等于 文档的高度
                if ($(window).height() + $(document).scrollTop() + 1 >= $(document).height()) {
                    //如果当前页大于总页数就不查询了
                    if (currentPage <= pages) {
                        //查询
                        query(url);
                    } else {
                        $(document).dialog({
                            type: 'notice',
                            infoText: '亲,已经到底了',
                            autoClose: 1500,
                            position: 'center'  // center: 居中; bottom: 底部
                        });
                    }
                }
            });

            //昵称签名变色
            var color = ["#cc5522","#55cc88","#3333cc","#dddd55"];
            var i=0
            setInterval(function () {
                if(i>=color.length){
                    i=0;
                }else{
                    i++;
                }
                $("#nickName").css("color",color[i]);
            },300);

            //获取攻略评论的总条数
            $.get("/users/strategy/comment",{userId:params.id},function (data) {
                $("#comments-strategy span").html(data);
            })

            //获取游记评论的总条数
            $.get("/users/travel/comment",{userId:params.id},function (data) {
                $("#comments-travel span").html(data);
            })


        });
    </script>
</head>
<body>
<div class="container bg">
    <a href="javascript:window.history.go(-1)" class="my-arrow">
        <span><i class="fa fa-chevron-left fa-2x"></i></span>
    </a>
    <div class="container">
        <div class="info">
            <img class="rounded-circle" width="17%" render-src="headImgUrl">
            <p class="name" render-html="nickName" id="nickName"></p>
            <p render-html="sign"></p>

            <div class="row num">
                <div class="col-2 border border-left-0 border-top-0 border-bottom-0">
                    <div>
                        <span>1</span>
                    </div>
                    <div>
                        <span>关注</span>
                    </div>
                </div>
                <div class="col-2">
                    <div>
                        <span>0</span>
                    </div>
                    <div>
                        <span>粉丝</span>
                    </div>
                </div>
                <div class="col">
                    <button class="btn btn-outline-light ibtn" id="letterBtn">私信</button>
                    <button class="btn btn-success ibtn" id="followBtn">关注</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="tabs">
    <ul class="nav nav-pills nav-justified  border border-left-0 border-top-0 border-right-0" id="pills-tab"
        role="tablist">
        <li class="nav-item">
            <a class="nav-link" id="comments-strategy" data-toggle="pill" href="#comments1" data-type="1">
                TA的攻略点评[<span></span>]
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="comments-travel" data-toggle="pill" href="#comments2" data-type="2">
                TA的游记点评[<span></span>]
            </a>
        </li>
    </ul>
    <div class="container tab-content" id="pills-tabContent">
        <div class="tab-pane fade show active" id="travels">
            <dl class="list" render-loop="list">
                <dd>
                    <a render-fun="getHref" render-key="list.id" data-url="/travelContent.html?id=">
                        <img render-src="list.coverUrl">
                        <p><span class="title" render-html="list.title"></span>
                        </p>
                    </a>
                    <hr>
                </dd>
            </dl>
        </div>

        <div class="comment tab-pane fade " id="comments1">
            <div render-loop="list">
                <div class="row">
                    <div class="col-2 comment-head">
                        <img class="rounded-circle" render-src="list.user.headImgUrl">
                    </div>
                    <div class="col">
                        <span class="comment-star" render-fun="getStar" render-key="list.starNum">
                        </span>
                        <span class="comment-date" render-html="list.createTime"></span>
                        <div class="comment-content">
                            <a data-url="/mine/strategyComment.html?id=" render-fun="getHref"
                               render-key="list.strategy.id">
                                <p render-html="list.content"></p>
                            </a>
                        </div>
                        <ul class="comment-img" render-loop="list.imgArr">
                            <li>
                                <img render-src="list.imgArr.self">
                            </li>
                        </ul>
                        <div class="comment-link">
                            <a data-url="/strategyCatalogs.html?id=" render-fun="getHref" render-key="list.strategy.id">
                                <img render-src="list.strategy.coverUrl">
                                <span render-html="list.strategy.title"></span>
                                <i class="fa fa-angle-right fa-2x"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="comment tab-pane fade " id="comments2">
            <div render-loop="list">
                <div class="row">
                    <div class="col-2 comment-head">
                        <img class="rounded-circle" render-src="list.user.headImgUrl">
                    </div>
                    <div class="col">
                        <span class="comment-star" render-html="list.user.nickName">
                        </span>
                        <span class="comment-date" render-html="list.createTime"></span>
                        <div class="comment-content">
                            <p render-html="list.content"></p>
                        </div>
                        <div class="comment-link">
                            <a data-url="/travelContent.html?id=" render-fun="getHref" render-key="list.travel.id">
                                <img render-src="list.travel.coverUrl">
                                <span render-html="list.travel.title"></span>
                                <i class="fa fa-angle-right fa-2x"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="pills-contact">.3333..</div>
    </div>
</div>


</body>
</html>